<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
    body,html{
      background-image: url(../icon/bj2.png);
      background-size:100% 800px;
    }
    </style>
</head>
<body>

<div id="playercontainer"></div>

<div class="wrap">
  <!-- 游戏 -->
  <div class="game-page">

    <!-- 视频列表 -->
  <div class="video-list-wrap" id="liveList">
    <ul class="clearfix" id="div_list">

    </ul>
  </div>
  <!-- 视频列表 end-->

  </div>
  <!-- 游戏 end-->
</div>
<div class="wrap">
  <!-- 游戏 -->
  <div class="game-page">
    <!-- 游戏列表 -->
    <div class="game-list-wrap" id="gameList">
      <ul class="clearfix" id="div_list">
        <!-- <li>
          <div class="game-a">
            <img src="//m.zhanqi.tv/static/new-html5/image/default_pic.png?v=20160926" alt="">
            <p class="game-list-name">加载中...</p>
          </div>
        </li> -->
      </ul>
    </div>
    <!-- 游戏列表 end-->

  </div>
  <!-- 游戏 end-->
</div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script src="../script/cyberplayer.js"></script>
<script src="../script/video.min.js"></script>
<script src="../script/videojs-contrib-hls.min.js"></script>
<script src="../script/videojs-contrib-quality-levels.min.js"></script>

<script type="text/javascript">
  var api_url = localStorage.getItem('api_url');
  apiready = function(){

    var player = cyberplayer("playercontainer").setup({
        width: api.winWidth,
        height: 200,
        file: api.pageParam.video, // <—rtmp or flv直播地址
        fallbackfile: api.pageParam.video, // <— 备用播放地址，为了手机上能进行直播，设置hls直播流
        controlbar: {
            barLogo: false,
            autostart: true
        },
        stretching: "uniform",
        volume: 100,
        controls: true,
        ak: "dfd6c7951d4c477bb2555496c8e97166" // 公有云平台注册即可获得accessKey
    });

    player.play();

    player.on('fullscreen', function (ret) {
         //alert( JSON.stringify( ret ) );
         if (ret.fullscreen) {
           api.setScreenOrientation({
               orientation: 'landscape_right'
           });
         }else {
           api.setScreenOrientation({
               orientation: 'portrait_up'
           });
         }
    });

    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {
      api.setScreenOrientation({
          orientation: 'portrait_up'
      });
      api.closeWin();
    });

  }



</script>


</html>
